<template>
    <div class="sidebar-wrapper">
        <div class="sidebar">

            <el-menu router default-active="/home">
                <el-menu-item index="/home">
                    <template #title>主页</template>
                </el-menu-item>

                <el-sub-menu index="2">
                    <template #title>
                        <span>创作</span>
                    </template>

                    <el-menu-item index="/publishArticle">
                        <template #title>文章</template>
                    </el-menu-item>

                    <el-menu-item index="/publishMinArticle">
                        <template #title>微头条</template>
                    </el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="3">
                    <template #title>
                        <span>管理</span>
                    </template>

                    <el-menu-item index="/workManage">
                        <template #title>作品管理</template>
                    </el-menu-item>
                    <el-menu-item index="3-2">
                        <template #title>评论管理</template>
                    </el-menu-item>
                </el-sub-menu>

                <template v-if="$store.state.user">
                    <template 
                        v-for="role of $store.state.user.roles" 
                        :index="role.menuIndex"
                        :key="role.id"
                    >
                        <el-menu-item 
                            v-if="role.menuName && role.menuIndex"
                            :index="role.menuIndex"
                        >
                            <template #title >
                                <span>{{ role.menuName }}</span>
                            </template>
                        </el-menu-item>

                    </template>
                </template>

            </el-menu>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Sidebar'
}
</script>

<style lang="less" scoped>
.sidebar{
    position: fixed;
    top: 65px;
    left: 0;
    bottom: 0;
    width: 220px;
    overflow: auto;
}
</style>